html,body{ width:100%; height:100%; min-width:400px; min-height:590px;  background:#f6f6f6; color:#333; font-family:"Microsoft Yahei","微软雅黑",Arial,"宋体";}
.headbar{ width:100%; height:100px; background:#d10311;}
.main{ width:1000px; height:300px; position:absolute; top:50%; left:50%; margin:-150px 0 0 -500px;}
.loginbox{ width:400px; height:300px; padding:50px; margin:10px 0 0; border:1px solid #d5d5d5; border-radius:5px; float:right; position:relative;}
.loginbox .title{ width:130px; height:38px; background:url(../images/logo-login.jpg) center center no-repeat #f6f6f6; margin:0 0 0 -65px; text-indent:-999px; overflow:hidden; position:absolute; left:50%; top:-20px;}
.loginbox .item{ width:100%; margin:10px 0; float:left;}
.loginbox .name,.loginbox .password{ width:298px; height:28px; padding:0 0 0 43px; border:1px solid #e5e5e5; line-height:28px; background:url(../images/icon-login.jpg) 9px 6px no-repeat #fff;}
.loginbox .password{ background-position:9px -36px;}
.loginbox .btn-submit{ width:300px; height:30px; line-height:30px; background:#fa535a; color:#fff; border:none; text-align:center;}
.loginbox .remember{ float:left; font-weight:normal;}
.loginbox .remember input{ margin:0 5px 0 0; vertical-align:middle;}
.loginbox .forget{ float:right; color:#333;}
.chart{ margin:40px 0 0; float:left;}
.footer{ width:100%; border-top:1px solid #e5e5e5; margin:10px 0 0; position:absolute; bottom:0;}
.footer p{ width:100%; height:100px; line-height:100px; text-align:center; border-top:1px solid #fff; display:block; color:#b4b4b4;}

@media (max-width: 1040px) {
    .main{  width:100%; padding:0 20px; left:auto; margin-left:0;}
}
@media (max-width: 930px) {
    .main{ width:400px; height:600px; left:50%; margin:-300px 0 0 -200px;}
    .chart img{ width:400px;}
    .loginbox{ float:left;}
}
@media (max-width: 400px) {
    .main{ left:0; margin:-300px 0 0 0;}
    .chart img{ width:400px; margin:20px 0 0;}
    .loginbox{ float:left;}
}

@media (max-height: 590px) {
    .main{ top:auto; margin-top:0; padding:20px 0;}
    .footer{ bottom:auto; top:430px;}
}
@media (max-height: 590px) and (max-width: 400px) {
    .footer{ bottom:auto; top:600px;}
}
@media (max-width: 930px) and (max-height: 830px) {
    .main{ top:auto; margin-top:0; padding:20px 0;}
    .footer{ bottom:auto; top:700px;}
}

/* 404/500 */
.notfound{ width:100%; text-align:center; margin:40px 0 0; font-size:18px;}
.notfound img{ padding:30px;}
.notfound .btn{ background:#fa535a; border-radius:0; color:#fff; font-size:14px; border:none;}